import React from 'react';
import logo from '../logo.svg';
import '../App.css';

function App() {
  // jsx  在JS 文件中编写html
  // 返回值 只能有一个 根元素  这个根元素可以是一个空标签
  // css类名 必须是 className
  // 在react的html结构中 编写变量 需要使用 {变量或者表达式}
  // {这里不能直接写对象 但是可以写数组}
  // 行内样式  需要是一个 style={对象}
  var a = "hello zhufeng";
  var obj = {qq:123};
  var ary = [1,2,3,4,<i key={1}>666</i>]
  var ary2 = [{name:"小红"},{name:"小红2"},{name:"小红3"},{name:"小红4"}]
  // [<li>姓名：xh</li>]
  var ary3 = ary2.map((item,index)=>{
    // 最好的key就是这条数据的一个唯一的id
    return <li key={index}>{item.name}</li>
  })
  console.log(ary3)
  function fn(arr){
    var temp = []
    for(let i=0; i< arr.length; i++){
      temp.push(<li key={i}>{arr[i].name}</li>)
    }
    return temp;
  }

  var sty = {
    color:'red'
  }
  var c='blue'
  var cla = 'box2'
  return (
    <>
    <div className="App">
      <h1>和哈哈哈</h1>
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" /> */}
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    <h1 className={"box " + cla}>{a.length > 10 ? "哈哈" : '呵呵'}</h1>
    <h2 style={sty}>{obj.qq}</h2>
    <h2 style={{color:c}}>{ary}</h2>
    <ul>{ary3}</ul>
    <ul>{fn(ary2)}</ul>
    <ul>
      {
        ary2.map(item=><li key={item.name}>{item.name}</li>)
      }
    </ul>
    <input type="checkbox" id='qqq'/>
    <label htmlFor="qqq">hello</label>
    </>
  );
}

export default App;
